<template>
  <div class="collesp">
    <el-icon
      size="26"
      color="#fff"
      @click="toggleCollapsed(true)"
      v-if="!isCollapse"
    >
      <Fold />
    </el-icon>
    <el-icon size="26" color="#fff" @click="toggleCollapsed(false)" v-else>
      <Expand />
    </el-icon>
    <span v-if="!isCollapse">收起侧边栏</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Expand, Fold } from '@element-plus/icons-vue'
import { useStore } from '@/store'

const layoutStore = useStore().useCustomLayoutStore()

const isCollapse = computed(() => layoutStore.collapsed)

const toggleCollapsed = (isCollapse: boolean) => {
  layoutStore.changeCollapsed(isCollapse)
}
defineOptions({
  name: 'MenuCollapsed'
})
</script>

<style scoped lang="scss">
span {
  font-size: 14px;
  padding-left: 10px;
  color: #fff;
}
.collesp {
  display: flex;
  align-items: center;
  // 解决字体 问题
  white-space: nowrap;
  &:hover {
    cursor: pointer;
  }
}
</style>
